<template>
	<view>
		<view class="uni-padding-wrap uni-common-mt">
			<view class="Viedo-one">
				<video id="myVideo" poster="http://114.115.143.3:3344/public/upload/n9xHeY3BtGFHRFvhQD4Dzyv4.jpg"
					src="https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4"
					@error="videoErrorCallback" @timeupdate="videoTimeUpdateEvent" :danmu-list="danmuList" enable-danmu
					danmu-btn show-mute-btn=true controls></video>
			</view>
			<!-- #ifndef MP-ALIPAY -->
			<view class="uni-list uni-common-mt">
				<view class="uni-list-cell">
					<view class="uni-list-cell-db">
						<input v-model="danmuValue" class="uni-input" type="text" placeholder="在此处输入弹幕内容" />
					</view>
				</view>
				<view class="uni-btn-v">
					<button @click="sendDanmu" size="mini" class="page-body-button">发送弹幕</button>
				</view>
			</view>
			<!-- #endif -->
			<view class="titleTxte">
				《南方车站的聚会》终极预告：胡歌满身血搏命换赏金桂纶镁廖凡开启一场生猛的...
			</view>
			<view class="titleTwo">
				<text>188.3万次播放</text>
				<view class="titleTwo-one">
					<text><uni-icons type="hand-up" size="20"></uni-icons>939</text>
					<text class="titleTwo-one-ico"><uni-icons type="chatbubble" size="20"></uni-icons>45</text>
				</view>
			</view>
			<view class="TiemImage">
				<image src="../../static/shouye/v4.png" mode=""></image>
				<view class="TiemImage-two">
					<view class="TiemImage-two-one">
						<text class="TiemImage-two-one-1">南方火车站的集会</text><text class="TiemImage-two-one-2"><uni-icons
								color="#fb6fba" type="fire-filled" size="18" class="icosss"></uni-icons>正在热映</text>
					</view>
					<view class="TiemImage-two-two">
						<text>淘票票评分</text><text
							class="TiemImage-two-two-txt">8.2</text><text>|</text><text>习亦男</text><text>胡歌</text><text>桂纶镁</text>
					</view>
				</view>
				<view class="TiemImage-three">
					<text>购票</text>
				</view>
			</view>
			<view class="ALl-one">
				<text>全部视频</text>
			</view>
			<view class="ALi-list" v-for="(item,index) in 3" :key="index">
				<image src="../../static/shouye/l3.png" mode=""></image>
				<view :class='(index+1)===1?"ALi-list-one active":"ALi-list-one"'>
					<text>《南方车站的聚会》终极预告：胡歌满身血搏命换赏金桂纶镁廖凡开启一场生猛的...</text>
					<view class="ALi-list-two">
						<text>播放数量</text>
					</view>
				</view>
			</view>
			<view class="Text-GenDuo">
				<text>查看全部视频22个视频</text>
			</view>
			<view class="">
				<!-- 评论区域样式 -->
				<view class="Plu-one">
					<!-- 头像 -->
					<image src="../../static/figure/y8.png" mode=""></image>
					<view class="Plu-one-a">
						<!-- 用户名称 -->
						<view class="Plu-one-a-one">
							<text>d**2</text>
						</view>
						<!-- 品论内容 -->
						<view class="Plu-one-a-two">
							<text>支持我胡，买不起找我，仅支持单身</text>
						</view>
						<!-- 评论时间 加点赞 -->
						<view class="Plu-one-a-three">
							<text>02-05 15:02</text>
							<text><uni-icons type="hand-up" color="#9999b3" size="20"></uni-icons>939</text>
						</view>
					</view>
				</view>
				<!-- 子评论区样式 -->
				<view class="Plu-one-zi">
					<!-- 头像 -->
					<image src="../../static/figure/y1.png" mode=""></image>
					<view class="Plu-one-s">
						<!-- 用户名称 -->
						<view class="Plu-one-a-one">
							<text>d**2</text>
						</view>
						<!-- 品论内容 -->
						<view class="Plu-one-a-two">
							<text>支持我胡，买不起找我，仅支持单身</text>
						</view>
						<!-- 评论时间 加点赞 -->
						<view class="Plu-one-a-three">
							<text>02-05 15:02</text>
							<text><uni-icons type="hand-up" color="#9999b3" size="20"></uni-icons>939</text>
						</view>
					</view>
				</view>
				<view class="Plu-one-zz">
					展开162条回复<uni-icons type="bottom" color="#b7b8b7" size="20"></uni-icons>
				</view>
			</view>
		</view>
		<!-- 底部输入框 -->
		<view class="Input-botten">
			<input type="text" placeholder="说点什么吧..."><text class="Input-botten-one">发送</text>
		</view>
		<view class="" style="height: 100rpx;">
			
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				src: '',
				danmuList: [{
						text: '第 1s 出现的弹幕',
						color: '#ff0000',
						time: 1
					},
					{
						text: '第 3s 出现的弹幕',
						color: '#ff00ff',
						time: 3
					}
				],
				danmuValue: '',
				playTime: "",
				allTime: "",
				value:""
			}
		},
		onReady: function(res) {
			// #ifndef MP-ALIPAY
			this.videoContext = uni.createVideoContext('myVideo')
			// #endif
		},
		methods: {
			//发送评论事件
			PlunFa(){
				
			},
			// 获取当时视频的播放时间
			videoTimeUpdateEvent(e) { // 播放进度改变
				// console.log(e)
				this.playTime = e.detail.currentTime
				this.allTime = e.detail.duration
				// console.log('视频播放时长', this.playTime.toFixed(0), '视频总时长', this.allTime)
			},
			//添加弹幕方法
			sendDanmu: function() {
				console.log(JSON.stringify(this.videoContext))
				this.videoContext.sendDanmu({
					text: this.danmuValue,
					color: this.getRandomColor(),
					tiem: this.playTime
				});
				this.danmuValue = '';
			},
			videoErrorCallback: function(e) {
				uni.showModal({
					content: e.target.errMsg,
					showCancel: false
				})
			},
			getRandomColor: function() {
				const rgb = []
				for (let i = 0; i < 3; ++i) {
					let color = Math.floor(Math.random() * 256).toString(16)
					color = color.length == 1 ? '0' + color : color
					rgb.push(color)
				}
				return '#' + rgb.join('')
			}
		}
	}
</script>
<style scoped>
	.Plu-one-a-three{
		font-size: 20rpx;
		color: #9999b3;
		display: flex;
		justify-content: space-between;
		margin-top: 7rpx;
	}
	.Plu-one-a-two{
		font-size: 20rpx;
		margin-top: 7rpx;
	}
	.Plu-one-a-one{
		font-weight: bold;
	}
	.Plu-one-a{
		width: 65vw;
	}
	.Plu-one-s{
		width: 45vw;
	}
	.Plu-one{
		display: flex;
		font-size: 25rpx;
		padding: 25rpx;
	}
	.Plu-one-zi{
		display: flex;
		font-size: 25rpx;
		padding: 10rpx 25rpx;
		margin-left: 20vw;
		border-top: 3rpx solid #ededed;
	}
	.Plu-one-zz{
		font-size: 25rpx;
		padding: 10rpx 25rpx;
		margin-left: 20vw;
		border-top: 3rpx solid #ededed;
		color: #b7b8b7;
	}
	.Plu-one-zi>image{
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		margin-right: 35rpx;
	}
	.Plu-one>image{
		border-radius: 50%;
		width: 100rpx;
		height: 100rpx;
		margin-right: 35rpx;
	}
	.Text-GenDuo{
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 25rpx;
		color: #7bc7f1;
		padding: 10rpx 0rpx 20rpx;
		border-bottom: 3rpx solid #ededed;
	}
	.Input-botten{
		display: flex;
		justify-content:space-around;
		position: fixed;
		bottom:0rpx;
		background: #fff;
		padding: 20rpx 25px;
		width: 100vw;
	}
	.Input-botten>input{
		width: 65vw;
	}
	.Input-botten>text{
		width: 20vw;
		font-size: 25rpx;
		color: #b6b6b6;
	}
	.ALi-list-two{
		margin-top: 20rpx;
		
	}
	.ALi-list-one {
		font-size: 28rpx;
		width: 55vw;
	}
	.active{
		color: #fb3777;
	}
	.ALi-list-one>text{
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
	}
	.ALi-list {
		padding: 0rpx 25rpx;
		display: flex;
		justify-content: space-between;
		margin-bottom: 15rpx;
	}

	.ALi-list>image {
		width: 250rpx;
		height: 150rpx;
	}

	.ALl-one {
		font-size: 28rpx;
		font-weight: bold;
		padding-left: 25rpx;
		margin-top: 25rpx;
		margin-bottom: 15rpx;
	}

	.TiemImage-two-two-txt {
		color: #f8b278 !important;
	}

	.TiemImage-three {
		border: 1px solid #fb6fba;
		font-size: 25rpx;
		padding: 5rpx 30rpx;
		border-radius: 50rpx;
		color: #fb6fba;
	}

	.TiemImage-two {
		width: 55vw;
	}

	.TiemImage-two-two {
		margin-top: 10rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 20rpx;
		color: #b2b0af;
	}

	.TiemImage-two-one {
		font-size: 25rpx;
	}

	.TiemImage-two-one-1 {
		font-weight: bold;
	}

	.TiemImage-two-one-2 {
		font-size: 18rpx;
		margin-left: 5rpx;
		border: 1rpx solid #fb6fba;
		padding: 5rpx 5rpx;
		color: #fb6fba;
	}

	.TiemImage {
		display: flex;
		padding: 20rpx 25rpx 0rpx 25rpx;
		justify-content: space-between;
		align-items: center;
		border-top: 3rpx solid #ededed;
		margin-top: 10rpx;
	}

	.titleTwo-one-ico {
		margin-left: 15rpx;
	}

	.TiemImage>image {
		width: 100rpx;
		height: 130rpx;
	}

	.titleTwo {
		display: flex;
		justify-content: space-between;
		padding: 0rpx 15rpx;
		font-size: 25rpx;
		color: #a1a3ac;
	}

	.titleTxte {
		font-size: 27rpx;
		font-weight: bold;
		padding: 0rpx 15rpx;
	}

	#myVideo {
		width: 100vw;
	}

	.uni-input {
		border: 1px solid #e0e0e0;
		width: 70vw;
		height: 50rpx;
		margin-left: 12rpx;
		border-radius: 5px;
	}

	.uni-list {
		display: flex;

	}

	.page-body-button {
		background: #fb3777;
		color: #e0e0e0;
		height: 50rpx;
		line-height: 50rpx;
	}
</style>